<template>
  <div>
    <div class="top">
      <div><img src="@/assets/images/logo.png" alt="" class="img" /></div>
      <div class="nav">
        <span :class="fullpath == '/' ? 'active' : ''" @click="navigate('/')"
          >首页</span
        >
        <span
          :class="fullpath == '/etc' ? 'active' : ''"
          @click="navigate('/etc')"
          >ETC</span
        >
        <span
          :class="fullpath == '/streaming' ? 'active' : ''"
          @click="navigate('/streaming')"
          >流媒体后视镜</span
        >
      </div>
    </div>
    <div class="banner">
      <div class="banner_streaming1">
        <div class="banner_streaming1_content">
          <div class="title">广汽原厂流媒体-后视镜</div>
          <div class="blips">
            <span>1080超高清</span>
            <span class="shu">|</span>
            <span>IPS高亮屏</span>
            <span class="shu">|</span>
            <span>前后切换</span>
          </div>
        </div>
      </div>
      <div class="banner_streaming2">
        <div class="collisionlocking">
          <div class="collisionlocking_icon">
            <img src="@/assets/images/collisionlocking_icon.png" alt="" />
          </div>
          <div class="title">碰撞锁定</div>
          <div class="text">
            <div>内置重力感器(G-sensor)，急刹或碰撞时</div>
            <div>系统立即自动保存当前视频，防止被循环录制覆盖</div>
          </div>
          <div class="img">
            <img src="@/assets/images/collisionlocking.png" alt="" />
          </div>
        </div>
        <div class="manuallocking">
          <div class="manuallocking_icon">
            <img src="@/assets/images/manuallocking_icon.png" alt="" />
          </div>
          <div class="title">手动锁定</div>
          <div class="text">
            <div>可手动选择锁定当前视频，防止被循环录制覆盖</div>
          </div>
          <div class="img">
            <img src="@/assets/images/manuallocking.png" alt="" />
          </div>
        </div>
      </div>
      <div class="banner_streaming3">
        <div class="title">
          <div>超高清1080画质</div>
          <div>专车专用设计、原车替换安装</div>
        </div>
        <div class="text">循环摄录-自动覆盖-智能控制内存-拒绝容量焦虑</div>
      </div>
      <div class="banner_streaming4">
        <div class="ips">
          <div class="title">IPS高亮显示屏</div>
          <div class="text">三倍高亮·稳定显示</div>
          <div class="img">
            <img src="@/assets/images/ips.png" alt="" />
          </div>
        </div>
        <div class="ips_bottom">
          <div class="ips_daytime">
            <div class="title">IPS高亮显示屏</div>
            <div class="text">三倍高亮·稳定显示</div>
            <div class="img">
              <img src="@/assets/images/ips_daytime.png" alt="" />
            </div>
          </div>
          <div class="ips_night">
            <div class="title">IPS高亮显示屏</div>
            <div class="text">三倍高亮·稳定显示</div>
            <div class="img">
              <img src="@/assets/images/ips_night.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="record">
          <div class="adress">
            <div style="padding-bottom: 20px;">
              <span class="tltle">办公地点</span><span class="copy">广州市白云区元下底路1号17栋101房</span>
            </div>
            <div class="img">
              <div><img src="http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/qrcore.jpg" alt="" /></div>
              <div style="text-align: center;">微信公众号</div>
            </div>
            <div class="center">
              Copyright © 2024 广州车易行科技发展有限公司 <span @click="goToBeianSite">粤ICP备20024691号-14</span>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// import router from "@/router";
import { useRouter } from "vue-router";
const router = useRouter();
const fullpath = ref("");
onMounted(() => {
  // 在组件挂载后获取当前路由的完整路径
  fullpath.value = router.currentRoute.value.fullPath;
  console.log(fullpath.value === "/etc");
  console.log("router", router.currentRoute.value.fullPath);
});
const navigate = (p) => {
  router.push(p);
  window.scrollTo(0, 0);
};
const goToBeianSite = () => {
  window.open('https://beian.miit.gov.cn/', '_blank');
}
</script>


<style lang="scss" scoped>
.top {
  height: 132px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100vw;
  background-color: #fff;
  z-index: 999;

  .img {
    height: 62px;
  }

  .nav {
    display: flex;

    span {
      margin-left: 90px;
      font-size: 32px;
      color: #000;
    }

    .active {
      color: #126ef9;
      padding-bottom: 10px;
      position: relative;
    }

    .active::after {
      content: "";
      position: absolute;
      bottom: -10px;
      width: 40px;
      height: 6px;
      background-color: #126ef9;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.banner {
  background-color: #d5e2f5;
  height: auto;
  padding-top: 132px;
}

.banner_streaming1 {
  background: url(http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/banner_streaming1.png) no-repeat;
  width: 100%;
  height: 824px;
  background-size: cover;

  .banner_streaming1_content {
    margin: 0 174px;
    color: #fff;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    height: 100%;

    .title {
      font-size: 60px;
    }

    .blips {
      font-size: 36px;
      margin-top: 48px;

      .shu {
        margin: 0 16px;
      }
    }
  }
}

.banner_streaming2 {
  width: 100%;
  height: 1000px;
  background-color: #d5e2f5;
  padding: 0 224px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .collisionlocking {
    display: flex;
    flex-direction: column;
    align-items: center;

    .collisionlocking_icon {
      img {
        width: 185px;
        height: 107px;
      }
    }

    .title {
      font-size: 50px;
      color: #333;
      font-weight: bold;
    }

    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24px;
      line-height: 36px;
      color: #333;
      font-weight: bold;
    }

    .img {
      img {
        width: 670px;
        height: 373px;
      }
    }
  }

  .manuallocking {
    display: flex;
    flex-direction: column;
    align-items: center;

    .manuallocking_icon {
      img {
        width: 185px;
        height: 107px;
      }
    }

    .title {
      font-size: 50px;
      color: #333;
      font-weight: bold;
    }

    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24px;
      line-height: 36px;
      color: #333;
      font-weight: bold;
    }

    .img {
      img {
        width: 670px;
        height: 373px;
      }
    }
  }
}

.banner_streaming3 {
  background: url(http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/banner_streaming3.png) no-repeat;
  width: 100%;
  height: 1000px;
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 200px;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 34px;
    font-size: 48px;
    color: #fff;
    font-weight: bold;
  }

  .text {
    font-size: 30px;
    color: #fff;
    font-weight: lighter;
  }
}

.banner_streaming4 {
  width: 100%;
  height: 1300px;
  background-color: #d5e2f5;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 172px;
  box-sizing: border-box;
  padding-top: 77px;

  .ips {
    display: flex;
    align-items: center;
    flex-direction: column;

    img {
      width: 706px;
      height: 410px;
    }

    .title {
      font-size: 60px;
      font-weight: bold;
      color: #126ef9;
      margin-bottom: 30px;
    }

    .text {
      font-size: 36px;
      color: #000;
      margin-bottom: 30px;
    }
  }

  .ips_bottom {
    display: flex;
    justify-content: space-between;

    .ips_daytime {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 624px;
        height: 168px;
      }

      .title {
        font-size: 60px;
        font-weight: bold;
        color: #126ef9;
        margin-bottom: 30px;
      }

      .text {
        font-size: 36px;
        color: #000;
        margin-bottom: 30px;
      }
    }

    .ips_night {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 624px;
        height: 168px;
      }

      .title {
        font-size: 60px;
        font-weight: bold;
        color: #126ef9;
        margin-bottom: 30px;
      }

      .text {
        font-size: 36px;
        color: #000;
        margin-bottom: 30px;
      }
    }
  }
}
.record {
  .adress {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .tltle {
      color: #000000;
      font-size: 16px;
      margin-right: 20px;
    }

    .copy {
      color: #999;
      font-size: 16px;
    }
  }

  .img {
    img {
      width: 200px;
      height: 200px;
    }
  }

  .center {
    font-size: 16px;
    padding: 50px 0;
  }
}
</style>